<template>
  <view class="concernBox">
    <!-- 用户信息 -->
    <view class="userInfo">
      <image :src="props.avatar" mode="aspectFill" />
      <text>{{ props.username }}</text>
    </view>
    <view class="concern" v-if="props.concern === 0" @click="onConcern"
      >关注</view
    >
  </view>
</template>

<!-- 关注组件 -->
<script lang="ts" setup>
import {
  ref,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
} from 'vue'

//父组件传递数据，是否关注、
const props = defineProps({
  concern: {
    type: Number,
    default: 0,
  },
  avatar: {
    type: String,
  },
  username: {
    type: String,
  },
})
//关注事件
const onConcern = () => {
  uni.showToast({
    title: '关注成功', // 提示信息文字
    icon: 'none', // 图标类型：成功、加载中或无图标
    duration: 2000, // 持续时间，单位毫秒，默认2秒后自动关闭
    mask: true, // 是否显示透明蒙层，防止触摸穿透，默认false
  })
}

// 组件周期函数--监听组件挂载完毕
onMounted(() => {})
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {})
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {})
// 组件周期函数--监听组件激活(显示)
onActivated(() => {})
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {})
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {})
</script>

<style scoped lang="scss">
.concernBox {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .userInfo {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    text {
      width: 400rpx;
      overflow: hidden; /* 隐藏超出内容 */
      text-overflow: ellipsis; /* 超出部分用省略号表示 */
      white-space: nowrap; /* 禁止换行 */
    }
  }

  .concern {
    width: 100rpx;
    height: 45rpx;
    line-height: 45rpx;
    text-align: center;
    border-radius: 24rpx;
    font-size: 26rpx;
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,
      rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
  }
}
</style>
